import { FC } from "react";
import styles from "./index.module.scss";
import { AritisFace } from "@/api/search/index";
interface IProps {
  list: AritisFace[];
}
const AritistList: FC<IProps> = ({ list }) => {
  return (
    <div className={styles.AritistList}>
      <div className={styles.list_wrap}>
        {list.map((it, index) => {
          return (
            <div className={styles.listItem} key={index}>
              <div className={styles.left}>
                <img src={it.img1v1Url} alt="" />
              </div>
              <div className={styles.content}>
                <div>
                  <span className={styles.occupation}>{it.occupation}: </span>
                  <span className={styles.name}>{it.name}</span>
                </div>
                <div className={styles.fansSizeWrap}>
                  <span>粉丝: </span>
                  <span>{it.fansSize}</span>
                  <span> 歌曲: </span>
                  <span>{it.musicSize}</span>
                </div>
              </div>
              <div className={styles.right}>
                <div>+ 关注</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default AritistList;
